<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <block name="title">
        <title>{$video.title} - 【66Play】一键记录你的游戏青春</title>
    </block>
    <meta name="keywords" content="{:C('WEB_SITE_KEYWORD')}">
    <meta name="description" content="{:C('WEB_SITE_DESCRIPTION')}">
    <link rel="shortcut icon" href="__ASSET__/favicon.ico">
    <script type="text/javascript" src="__ASSET__/Home/player/match/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="__ASSET__/Home/ui3/js/lib/knockout-2.3.0.js"></script>
    <script type="text/javascript" src="__ASSET__/Home/player/match/js/swiper.min.js"></script>
    <script type="text/javascript" src="__ASSET__/Home/mobile3/js/jwplayer/jwplayer.js?v=1.0"></script>
    <script type="text/javascript" src="__ASSET__/Home/player/match/js/match_pc.js?v=1.0.3"></script>
    <link rel="stylesheet" href="__ASSET__/Home/player/match/css/swiper.min.css"/>
    <link rel="stylesheet" href="__ASSET__/Home/player/match/css/explore.css?v=1.0.2">
    <script type="text/javascript">
        {:C('GLOBAL_BDHM')}
    </script>
    <style type="text/css">
        #mod_player{
            height: 100%;
        }
       .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 12px;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .box-right{
            padding: 5px 20px;
        }
        .item-message{
            padding: 0;
        }
        .swiper-button-next,
        .swiper-button-prev{
            width: 13.5px;
            height: 22px;
            background-size: contain;
            margin-top: -11px;
        }
        .swiper-button-next{
            right: 2px;
        }
        .swiper-button-prev{
            left: 2px;
        }
        #myPopup{
            padding: 6px;
        }
        .related-videos{
            width: 100%;
        }
        .related-videos>h1{
            padding: 0 0 5px 0;
            display: block;
            height: 30px;
            line-height: 25px;
        }
        .related-videos li{
            width: 50%;
        }
        .replay{
            display: inline;
            float: right;
            width: inherit;
            padding-top: 0;
        }
        .related-videos>h1>em{
          float: left;
        }
    </style>
    <script type="text/javascript">
        window._COMMON = {
            PUBLIC : "__ASSET__",
        };
        function dataInit() {
            var detailUrl = "{:U('api/match/detailNew', ['race_id' => $video['id'], 'appid' => $appid])}";
            $.get(detailUrl, function(data, textStatus, xhr) {
                if (data.code == 200) {
                    viewModel.videoList(getVideoList(data.data.videos));
                    swiper = new Swiper('.swiper-container', {
                        nextButton: '.swiper-button-next',
                        prevButton: '.swiper-button-prev',
                        slidesPerView: 2,
                        paginationClickable: true,
                        spaceBetween: 5
                    });
                    var listWidth=$(".video-box").width();
                    $(".video-box").height(listWidth*9/16);
                    $(".swiper-container").width(listWidth-40);

                    initPlayer();
                }
            });
            var recommendUrl = "{:U('VideoPlay/recommend', ['game_id' => $video['game_id']])}";
            $.get(recommendUrl, function(data) {
                if (data.state == 0) {
                    var list = [];
                    $.each(data.data, function(index, el) {
                        var video = el;
                        video.videoLink = "{:U('share/video')}/id/"+el.id;
                        list.push(video);
                    });
                    viewModel.recommend(list);
                }
            });
            playIndex = 0;
            setHeight();
        }
        function initPlayer() {
            jwplayer("mod_player").setup({
                flashplayer: _COMMON.PUBLIC+"/Home/ui3/js/jwplayer/jwplayer.flash.swf",
                image: "",
                // file: viewModel.videoList()[0].uri,
                sources: viewModel.videoList()[0].sources,
                controlbar: "over",  //控制条位置
                screencolor: "#fff",   //播放器颜色
                stretching: "fill",    //画面自适应
                repeat:false,       //重复播放
                autostart:false,         //自动播放
                events:{
                    onComplete: function(e){ 
                        playNext();
                    },
                },
                width: "100%",
                aspectratio: "16:9",
            });
        }

        function setHeight() {
            var mypopwidth = $("#myPopup").width();
            $("#myPopup").height(mypopwidth*9/16+30);
            $('#myPopup').css({
                'top': ($(".video-box").height()/2 - $('#myPopup').outerHeight(true)/2)
            });
            var relatedimgwidth = $(".related-video-img>img").width();
            $(".related-video-img>img").height(relatedimgwidth*9/16);

            var relatedliwidth = $(".related-videos li").width();
            $(".related-videos li").height(relatedliwidth*9/16);

            var listWidth=$(".video-box").width();
            $(".swiper-container").width(listWidth-40);
        }
    </script>
</head>
<body>
<!--赛事播放视频-->
<div>
    <!--比赛精彩视频-->
    <div class="main-box">
        <div class="video-box">
            <div id="mod_player"></div>
            <!--视频播放完成弹窗S-->
            <!-- ko if:recommendShow() -->
            <div id="myPopup">
                <div class="related-videos">
                    <h1>
                        <em>相关视频</em>
                        <span class="replay" onclick="replay()">
                            <img src="__ASSET__/Home/player/match/images/replay.png"/>重播
                        </span>
                    </h1>
                    <ul data-bind="foreach:recommend">
                        <li>
                            <a href="" data-bind="attr:{'href':videoLink}" target="_blank">
                                <div class="related-video-img">
                                    <img src="" data-bind="attr:{'src':thumb}"/>
                                    <span class="related-video-name" data-bind="text:title"></span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="popbg"></div>
            <!-- /ko -->
            <!--视频播放完成弹窗E-->
        </div>
        <!-- ko if:viewModel.videoList().length > 0 -->
        <div class="box-right">
            <!--图文-->
            <div class="swiper-container">
                <div class="swiper-wrapper" data-bind="foreach:videoList">
                    <div class="swiper-slide" data-slide="" data-bind="attr:{'data-slide':index}, click:play, css:{'swiper-active':is_current}">
                        <div class="item-video" title="" data-bind="attr:{'title':title}">
                            <img src="" alt="" data-bind="attr:{'src':thumb, 'alt':title}"/>
                            <span class="item-message">
                                <em data-bind="text:time_point"></em>
                                <!-- ko text:title --><!-- /ko -->
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <!-- /ko -->
    </div>
</div>
</body>
</html>
<script>
    var swiper = new Swiper('.swiper-container', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 2,
        paginationClickable: true,
        spaceBetween: 5
    });
</script>
